import { useVisual } from "@/hooks/userEditor"
import { deepAssign } from "@/utils/util"

const { commonStyle } = useVisual()
const optionDefault = {
  legend: {
    textStyle: {
      fontSize: 14,
      color: commonStyle.value.theme === "dark" ? "#fff" : "#000",
      fontFamily: commonStyle.value.fontFamily
    }
  },
  xAxis: {
    type: "category"
  },
  yAxis: {
    type: "value"
  }
}
export const options = (option) => {
  g.clearCertain(option, ["", null, undefined])
  // 单X轴
  const xAxis = [option.xAxis]
  // 单Y轴
  const yAxis = [option.yAxis]
  // 多Y轴
  const item = {
    textStyle: {
      fontSize: 14,
      color: commonStyle.value.theme === "dark" ? "#fff" : "#000",
      fontFamily: commonStyle.value.fontFamily
    },
    theme: option.theme,
    title: option.title,
    grid: option.grid,
    legend: deepAssign(optionDefault.legend, option.legend),
    tooltip: {
      ...{
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        },
        formatter(params) {
          let html = ""
          if (params.seriesType) {
            html = `<div><p class="tooltip-title">${params.name}</p>`
            html += `<div class="content-panel">
<span>${params.marker}${params.data.str}：</span>
<span class="tooltip-value">${params.value} ${params.percent}%</span></div>`
          } else {
            html = `<div><p class="tooltip-title">${params[0].name}</p>`
            params.forEach((p) => {
              html += `<div class="content-panel"><span>${p.marker}${p.seriesName}</span><span class="tooltip-value">
${p.value[p.seriesName]}</span></div>`
            })
          }
          html += "</div>"
          return html
        },
        className: "echarts-tooltip-diy"
      },
      ...option.tooltip
    },
    toolbox: option.toolbox,
    xAxis,
    yAxis,
    ...option.animation
  }
  if (option.horizontal) {
    item.yAxis.forEach((y) => {
      y.type = "category"
    })
    item.xAxis.forEach((x) => {
      x.type = "value"
    })
  }
  if (option.legend.show) {
    item.grid.top += option.legend.itemHeight + option.legend.padding + 10
  }
  return item
}

/*
 * @Description: 组装echarts数据
 */
export const echartsDataset = (data, dimension, measure, aggregation) => {
  let dimensions = []
  let dimensionStr = ""
  dimension.forEach((d) => {
    dimensionStr += d.title + "-"
  })
  dimensionStr = dimensionStr.substring(0, dimensionStr.length - 1)
  data.data.forEach((d) => {
    d[dimensionStr] = dimension.map((m) => d[m.title]).join("-")
  })
  if (aggregation?.length > 0) {
    const group = []
    const keys = []
    g.group(data.data, [dimensionStr], function (item, value) {
      const obj = {}
      obj[dimensionStr] = item[dimensionStr]
      value.forEach((v) => {
        obj[v[aggregation[0].title] + measure[0].title] = v[measure[0].title]
        if (!keys.includes(v[aggregation[0].title] + measure[0].title)) {
          keys.push(v[aggregation[0].title] + measure[0].title)
        }
      })
      group.push(obj)
    })
    data.data = group
    dimensions = [dimensionStr, ...keys]
  } else {
    dimensions = [dimensionStr, ...measure.map((m) => m.title)]
  }
  return {
    dimensions,
    source: data.data
  }
}
